<template>
	<view>
		<u-action-sheet :show="show" round="10" closeOnClickOverlay="true" @close="closeSheet" :cancelText="$t('取消')">
			<view class="pay-tag pd-5">
				<view class="text-center pd-bottom-10 pd-top-10">
					<text class="title">{{$t("手机号验证")}}</text>
				</view>

				<view class="pay-tag pd-10">
					<view class="text-center mg-top-10">
						<text class="price" mode="price" :color="color.primary" size="36" :text="price"
							algin="center">{{price}}</text>
					</view>
					<view class="text-center mg-top-10">
						<text class="info">{{$t('请输入电话号码的最后{0}位',[4])}}</text>
					</view>
					<view class="ltr text-center pd-10">
						<view class="autoInput">
							<u-code-input @finish="finish" :maxlength="4" v-model="value"></u-code-input>
						</view>
					</view>
					<view>

					</view>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>

	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			price: {
				type: Number,
				default: 0.0
			}
		},
		data() {
			return {
				//show: true
				value: ""
			}
		},
		methods: {
			finish(e) {
				var the = this;
				var userInfo = this.userInfo
				var phone = userInfo.phone || ""
				//console.log("LLLL",phone.indexOf(e))
				if (phone.indexOf(e) > -1) {
					the.$emit("action")
				}
				console.log('输入结束，当前值为：' + e);
			},
			closeSheet:function(){
								var the = this;
				console.log("----------------")
				this.show=false;
						the.$emit("cancel")
			}
		}
	}
</script>

<style>
	.pay-tag {
		min-height: 300rpx;
	}

	.autoInput {
		width: 200px;
		margin: 0 auto;
	}

	.price {
		font-size: 28px;
		font-weight: bold;
	}

	.price::after {
		content: "￥";
	}

	.title {
		font-weight: bold;
		font-size: 14px;
	}

	.info {
		text-align: center;
		font-size: 12px;
		color: #797a7b;
	}
</style>